<template>
    <div class="body">
        <div class="userInfo">      
            <p>亲爱的:<strong>{{ state.user_info.username }}</strong></p>
        </div>
        <el-divider />
        <div class="bank_point">
            <p>库币余额：<el-text style="success">{{ state.user_info.bank_point }}</el-text></p>
            <el-button @click="reflashPersonalInformationClick">刷新</el-button>
            <el-button type="success" @click="gotoRechargeClick">捐款</el-button>
            <!-- <el-button type="primary" @click="gotoWithdrawClick">提现</el-button> -->
        </div>
    </div>
</template>
  
<script setup>
import axios from '@/utils/axios'
import { reactive, ref } from 'vue'
import { localGet, verifyToken } from '@/utils'
import { onMounted } from "@vue/runtime-core"
import { useRoute, useRouter } from "vue-router";

const router =useRouter()
const modifyNicknameDialogFormRef=ref(null)
const state = reactive({
    orderUnique:'',
    user_info: Object,
    rechargeOrder: {},
    withdrawOrder: {},
    rechargeVisible: false,
    withdrawVisible:false,
    rechargeForm:{
      amount:0,
    },
    withdrawForm:{
      amount:0,
    },  
    rules: { // 规则
      amount: [
        {required: 'true', message: '请填写金额', trigger: ['change']}
      ]
    },
})
onMounted(()=>{ 
    // console.log('用户信息：', localGet("user_information"))
    verifyToken()   
    state.user_info=localGet("user_information")   
})

// 提现点击事件
const gotoWithdrawClick=()=>{
  console.log('用户要提现啦')
  router.push('/userCenter/withdraw')
}
// 充值点击事件
const gotoRechargeClick=()=>{    
    console.log("用户要充值啦");
    router.push('/userCenter/recharge')
}

// 刷新个人资料
const reflashPersonalInformationClick=()=>{
  verifyToken()
  state.user_info=localGet("user_information")
  // router.go(0)
}
</script>

<style scoped>
    .body{   
        margin: 8px;
    }
    .userInfo{
       padding: 10px;
    }
    .bank_point{
        padding: 10px;
    }
</style>